<template>


<div>
    <div ref="mapChart" style="height: 400px"></div>
</div>
  

</template>




<script setup lang="ts">

//参考网址  https://blog.csdn.net/weixin_44088179/article/details/132478132
//vue echarts 中国地图处理南海诸岛为简图  https://blog.csdn.net/n_2021/article/details/132836912


import * as echarts from 'echarts';
import { onMounted, ref, Ref } from 'vue';
import chinaJson from '../../assets/map/china.json';

import { getCompanyCount } from '../../apis/company/company';

// 定义数据类型
interface MapDataPoint {
    name: string;
    value: [number, number];
    count:number
}

// 定义 ref 类型
const mapChart: Ref<HTMLDivElement | null> = ref(null);
// const data: Ref<MapDataPoint[]> = ref([
//     { name: '北京', value: [116.413387, 39.911588],count:100 },
//     { name: '广州市', value: [113.2644, 23.1291],count:200 },
//     { name: '成都市', value: [104.0657, 30.6598],count:300 },
//     { name: '苏州市', value: [120.6195, 31.2995],count:400 },
//     { name: '北京市', value: [116.404, 39.9042],count:100 },
//     { name: '连云港市', value: [119.1676, 34.5934],count:100 },
//     { name: '南京市', value: [118.7674, 32.0415],count:100 },
//     { name: '杭州市', value: [120.1535, 30.2874],count:100 },
//     { name: '乌鲁木齐市', value: [87.6168, 43.7928],count:100 },
//     { name: '拉萨市', value: [91.11, 29.97],count:100 },
//     { name: '西安市', value: [108.953, 34.2779] ,count:100},
//     { name: '南宁市', value: [108.32006, 22.82402],count:100},
// ]);

const data: Ref<MapDataPoint[]> = ref([]);

const getCountData=async ()=>{

const res =await getCompanyCount();
console.log("获取到的数据",res.data);
//{count: 1, name: '济南市', lngLat: '117.120098, 36.6512'}

data.value=res.data.map((item)=>({name:item.name,count:item.count,value:item.lngLat.split(',')})) as any as MapDataPoint[];

getList();

}


onMounted(() => {
      getCountData();

});

function getList() {
    if (!mapChart.value) return;

    echarts.registerMap('china', chinaJson as any);
    const mapChartInstance = echarts.init(mapChart.value, 'macarons');

    const option: echarts.EChartsOption = {
        tooltip: {
      trigger: 'item', // 触发类型：数据项图形触发
      backgroundColor: 'rgba(0, 0, 0, 0.7)', // 背景色
      borderColor: 'rgba(255, 255, 255, 0.5)', // 边框颜色
      borderWidth: 1, // 边框宽度

      textStyle: {
        color: '#fff', // 文字颜色
        fontSize: 14, // 文字大小
      },
      formatter: (params: any) => {
        // 自定义提示内容
        if (params.data) {
        //   const point = params.data as MapDataPoint;
          return `
            <div style="font-weight:bold">${ params.data.name}</div>
            <div>机构数量: ${ params.data.count}</div>
          `;
        }
        return params.name;
      }
    },
        series: [
            // 只保留散点图系列，移除飞线图系列
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: data.value,
                symbolSize: 8,
                itemStyle: {
                    color: '#ff0000',
                },
                label: {
                    show: true,
                    color: '#FFF',
                    formatter: (params: any) => params.data.name,
                    position: 'top',
                    shadowBlur: 10,
                    padding: [0, 0, 6, 0],
                    shadowColor: 'rgba(0, 0, 0, 1)',
                    shadowOffsetX: 5,
                    shadowOffsetY: 5,
                    fontSize: 14,
                },
                tooltip: {
                    show: true
                }
            },
        ],
        geo: [

            {
                map: 'china',
              
                zoom: 1.2,
                layoutCenter: ['50%', '50%'],
                layoutSize: '100%',
                show: true,
                roam: false,
                //对应的名字映射
                nameMap: {
                    澳门特别行政区: "澳门",
                    广西壮族自治区: "广西",
                    西藏自治区: "西藏",
                    宁夏回族自治区: "宁夏",
                    青海省: "青海",
                    甘肃省: "甘肃",
                    新疆维吾尔自治区: "新疆",
                    内蒙古自治区: "内蒙古",
                    河北省: "河北",
                    山西省: "山西",
                    辽宁省: "辽宁",
                    吉林省: "吉林",
                    黑龙江省: "黑龙江",
                    江苏省: "江苏",
                    浙江省: "浙江",
                    安徽省: "安徽",
                    福建省: "福建",
                    江西省: "江西",
                    山东省: "山东",
                    河南省: "河南",
                    湖北省: "湖北",
                    湖南省: "湖南",
                    广东省: "广东",
                    海南省: "海南",
                    四川省: "四川",
                    贵州省: "贵州",
                    云南省: "云南",
                    陕西省: "陕西",
                },
                label: {
                    show: false,
                    color: '#fff',
                },
                itemStyle: {
                    areaColor: 'rgba(58,149,253,0.75)',
                    borderColor: 'rgba(192,243,251,0.5)',
                    borderWidth: 0.8,
                },
                emphasis: {
                    itemStyle: {
                        color: '#fff',
                        areaColor: 'rgba(0,254,233,0.6)',
                    },
                    label: {
                        show: true,
                        color: '#000',
                    },
                },
                tooltip: {
                    show: false
                }
            },
            {
                type: 'map',
                map: 'china',
                zlevel: -1,
                zoom: 1.2,
                layoutCenter: ['50%', '51%'],
                layoutSize: '100%',
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 1,
                    borderColor: 'rgba(58,149,253,0.8)',
                    shadowColor: 'rgba(172, 122, 255,0.5)',
                    shadowOffsetY: 5,
                    shadowBlur: 15,
                    areaColor: 'rgba(5,21,35,0.1)',
                }

            },

        ],
    };

    mapChartInstance.setOption(option);

    window.addEventListener('resize', () => {
        mapChartInstance.resize();
    });
}
</script>